<template>
	<view>
		<view class="flex align-center " v-if="!user">
			<!-- 个人头像 -->
			<view class="flex align-center justify-center" style="width: 180rpx;height: 180rpx;">
				<image src="@/static/gift/9.png" mode="" style="width: 105rpx;height: 105rpx;"></image>
			</view>
			<!-- 个人信息 -->
			<view class="flex flex-column">
				<text class="font-md">未登录</text>
				<text class="font text-muted">登录领福利、订阅主播</text>
			</view>
			<!-- 编辑资料 -->
			<view class="ml-auto mr-3">
				<view class="flex align-center justify-center rounded  border border-main p-2" hover-class="bg-light"
					@click="openLogin()">
					<text class="text-main font">立即登录</text>
				</view>
			</view>
		</view>

		<view v-else class="flex align-center">
			<view class="flex align-center justify-center" style="width: 180rpx;height: 180rpx;">
				<image :src="user.avatar || '/static/gift/10.png'" class="rounded-circle"
					style="width: 105rpx;height: 105rpx;"></image>
			</view>
			<view class="flex flex-column">
				<text class="font-md">{{ user.username }}</text>
				<!-- <text class="font text-muted"></text> -->
			</view>
			<view class="ml-auto mr-3" @click="toDetail()">
				<view class="border border-main rounded flex align-center justify-center p-2" hover-class="bg-light">
					<text class="text-main font">编辑资料</text>
				</view>
			</view>
		</view>

		<view class="f-divider"></view>
		<f-list-item title="我的金币" :showRight="false" icon="icon-qiandaijinbi"
			@click="authJump({url:'/pages/coin/coin'})">
			<text class="font-sm text-muted">{{user?user.coin:0}}金币 立即充值</text>
		</f-list-item>
		<f-list-item icon="icon-zhibojian" title="我的直播">
			<text class="font-sm text-muted">0</text>
		</f-list-item>
		<f-list-item title="我的关注" icon="icon-a-tianjiaguanzhuguanzhu">
			<text class="font-sm text-muted">0</text>
		</f-list-item>
		<f-list-item title="历史记录" icon="icon-lishijilu_huaban">
		</f-list-item>
	</view>
</template>

<script>
	import fListItem from '@/component/common/f-list-item/f-list-item.vue';
	import $C from '@/common/config.js';
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			fListItem
		},
		data() {
			return {

			}
		},
		onShow() {
			this.$store.dispatch('getUserInfo')
		},
		onNavigationBarButtonTap() {
			this.authJump({
				url: '../user-set/user-set'
			})

		},
		computed: {
			...mapState(["user"])
		},
		methods: {
			openLogin() {
				uni.navigateTo({
					url: '../login/login'
				})
			},
			toDetail(){
				uni.navigateTo({
					url:'../my-detail/my-detail'
				})
			}
		}
	}
</script>

<style>

</style>
